import {
  Drawer, Space, Button,
} from 'antd'
import { useCallback, useRef, useState } from 'react'
import { useRequest } from 'ahooks'
import SetRootIdAddForm from '../../SetRootIdAdd/SetRootIdAddForm'
import { getAdminDetailApi } from '@/api/auth'

const SetRootIdListUpdate = (props) => {
  const updateIns = useRef()
  const {
    open, setOpen, adminname, handleAdminGroup,
  } = props
  const { data: detail } = useRequest(() => getAdminDetailApi(adminname), {
    ready: adminname,
    refreshDeps: [adminname, open],
  })
  const onClose = useCallback(() => {
    setOpen(false)
  })
  const handleUpdateSubmit = useCallback(async () => {
    try {
      await updateIns.current.submit()
      handleAdminGroup(false, true)
      setOpen(false)
    } catch (error) {
      console.log(error)
    }
  })
  return (
    <Drawer
      title="编辑管理员"
      width={720}
      onClose={onClose}
      visible={open}
      bodyStyle={{ paddingBottom: 80 }}
      extra={(
        <Space>
          <Button onClick={onClose}>取消</Button>
          <Button onClick={handleUpdateSubmit} type="primary">
            提交
          </Button>
        </Space>
      )}
    >
      <SetRootIdAddForm ref={updateIns} detail={detail} />
    </Drawer>
  )
}

export default SetRootIdListUpdate
